import { initGraph, SelectionType } from '../../utils/common';
import { initGraphOption } from '../../utils/initGraphOption';
import React, { Component } from 'react';

import { AmountData } from '../../stores/GraphDataStore';

import './graph.scss';

export interface GraphProps {
    data: Array<AmountData>;
    containerId: string;
    graphType: string;
    graphTitle: string;
    graphSelections: SelectionType[][][];
}

export interface GraphPropsType {
    graphProps: GraphProps;
}

export interface FormatterType {
    componentType: 'series';
    // 系列类型
    seriesType: string;
    // 系列在传入的 option.series 中的 index
    seriesIndex: number;
    // 系列名称
    seriesName: string;
    // 数据名，类目名
    name: string;
    // 数据在传入的 data 数组中的 index
    dataIndex: number;
    // 传入的原始数据项
    data: Object;
    // 传入的数据值
    value: number | Array<number>;
    // 数据图形的颜色
    color: string;
    // 百分比
    percent: number;
    // 
    galleryViewPath?: string;
    // 
    galleryEditorPath?: string;
    // 
    imagePath?: string;
    // 
    gl?: string;
}

export default class Graph extends Component<GraphPropsType> {
    componentDidMount(): void {
        const  graphProps = this.props.graphProps;
        const { graphTitle, containerId } = this.props.graphProps;
        initGraph( graphTitle, containerId, initGraphOption(graphProps));
    }

    shouldComponentUpdate(nextProps: GraphPropsType): boolean {
        const graphProps = nextProps.graphProps;
        const { graphTitle, containerId } = nextProps.graphProps;
        initGraph( graphTitle, containerId, initGraphOption(graphProps));
        
        return true;
    }
    render(): JSX.Element {
        const containerId = this.props.graphProps.containerId;
        return (
            <div className="graph" id={containerId} style={{ width: '100%', height: '90%' }} />
        );
    }
}